<template>
  <div class="videoMask">
    <div class="container">
        <my-video :sources="video.sources" :options="video.options"></my-video>
    </div>
    <div class="closeVideo" @click="handleCloseMyVideoShow">×</div>
  </div>
</template>

<script>
import myVideo from 'vue-video'
export default {
  components: {
    myVideo
  },
  props: {
    width: {
      type: String,
      default: "200xp"
    },
    heigth: {
      type: String,
      default: "150px"
    }
  },
  data() {
    return {
      video: {
                sources: [{
                    // src: 'http://covteam.u.qiniudn.com/oceans.mp4',
                    src: require('../../../../public/static_img/test.mp4'),
                    type: 'video/mp4'
                }],
                options: {
                    autoplay: true,
                    volume: 0.6,
                    // poster: 'http://covteam.u.qiniudn.com/poster.png'
                }
            }
    };
  },
  created() {},
  mounted() {
  },
  beforeDestroy() {},
  methods: {
    handleCloseMyVideoShow() {
      console.log("2214")
      this.$emit("handleCloseMyVideoShow")
    }
  }
};
</script>
<style lang="scss" scoped>
.videoMask{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100% - 50px);
  background: rgba(0,0,0,.8);
  z-index: 9999;

  .container{
    width: 50%;
    height: auto;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  .closeVideo{
    width: 50px;
    height: 50px;
    position: absolute;
    top: 10px;
    right: 10px;
    color: #fff;
    cursor: pointer;
  }
}
</style>
